import { useEffect, useMemo, useState } from 'react'
import { useMemoizedFn } from 'ahooks'
import classnames from 'classnames'
import { Card, Segmented, Timeline } from 'antd'

import { VCenterEmpty } from '@/components/VCenterEmpty'
import { apiGetOriginalRouteInfo } from './apis'
import { IRouteLine } from './interface'
import styles from './styles.module.less'

interface IProps {
  waybillNo: string
}

export const RouteLine = (props: IProps) => {
  const { waybillNo } = props
  const [routeLine, setRouteLine] = useState<IRouteLine[]>([])
  const [routeLang, setRouteLang] = useState<number>(1)
  const [loading, setLoading] = useState<boolean>(false)

  // 请求接口
  const initData = useMemoizedFn(async (isinit?: boolean) => {
    try {
      if (isinit) setLoading(true)
      const data = await apiGetOriginalRouteInfo(waybillNo)
      setRouteLine(data)
    } finally {
      if (isinit) setLoading(false)
    }
  })

  /** 公共样式 */
  const commonCls = useMemoizedFn((item: IRouteLine, index: number) => {
    return classnames(
      item.markFlag ? styles.textDelete : '',
      item.routeType === 2 ? styles.textDanger : '',
      item.actionFlag ? styles.textYellow : '',
      index > 1 ? styles.textFilter : '',
    )
  })

  /** 公共颜色 */
  const dotCls = useMemoizedFn((item: IRouteLine, index: number) => {
    let cls = index > 1 ? 'rgba(196, 202, 218, 1)' : 'rgba(39, 94, 255, 1)'
    if (item.markFlag) {
      cls = `rgba(216, 26, 26, ${index > 1 ? 0.5 : 1})`
    }
    if (item.actionFlag) {
      cls = `rgba(246, 177, 0, ${index > 1 ? 0.5 : 1})`
    }
    return cls
  })

  /** 时间线 */
  const items = useMemo(() => {
    const currentItems = (routeLine || []).map((item, index) => {
      return {
        children: (
          <div className={styles.routeContain}>
            {item.isTitle ? (
              <div className={classnames(styles.textLabel, commonCls(item, index))}>
                {routeLang === 1 ? item.logisticsStatusCn : item.logisticsStatusEn}
              </div>
            ) : (
              <>
                <div className={classnames(styles.textNew, commonCls(item, index))}>
                  【{routeLang === 1 ? item.routeNodeCn : item.routeNodeEn}】
                  {routeLang === 1 ? item.titleCn : item.titleEn}
                </div>
                <div className={classnames(styles.textRoute, commonCls(item, index))}>
                  {routeLang === 1 ? item.descCn : item.descEn}
                </div>
                <div className={classnames(styles.textTime, commonCls(item, index))}>
                  {item.occurDate} {item.publisher}
                </div>
              </>
            )}
          </div>
        ),
        color: dotCls(item, index),
      }
    })
    return currentItems
  }, [commonCls, dotCls, routeLang, routeLine])

  useEffect(() => {
    initData(true)
  }, [initData, waybillNo])

  return (
    <Card
      className={styles.card}
      title="路由"
      loading={loading}
      extra={
        <Segmented<number>
          options={[
            { label: '中文', value: 1 },
            { label: 'EN', value: 2 },
          ]}
          value={routeLang}
          onChange={v => {
            setRouteLang(v)
          }}
        />
      }
    >
      {routeLine?.length <= 0 ? (
        VCenterEmpty.render()
      ) : (
        <div className={styles.box}>
          <Timeline mode="left" items={items} />
        </div>
      )}
    </Card>
  )
}
